<!-- 该组件需自行实现, 此处只是示例 -->
<template>
	<!-- 为性能缘故, 当tab项多时, 请尽量不要删除 v-if="show" -->
<!-- 
			 -->
	<view v-if="show" class="QS">
		<block v-if="tabItem.id == 'offlinePayment'">
			<QS-P height="25rpx"></QS-P>
			<view class="bgColor_ffffff" v-for="(item, index) in list" :key="index">
				<collection-list-item :item="item" @tap="navigateTo('my.codeDetail', { code: item.code })"></collection-list-item>
			</view>
		</block>
		<block v-else-if="tabItem.id == 'stopCarOrder'">
			<QS-P height="25rpx"></QS-P>
			<view class="stop-list-container">
				<view
				class="stop-list-item" 
				v-for="(item, index) in list" 
				:key="index">
					<view class="flex_row_none_c">
						<view class="flex_column flex_1">
							<view class="text-item">
								<text class="QS-text large weight">停车缴费 {{item.plateNo}}</text>
							</view>
							<view class="text-item">
								<text class="QS-text mini-x color_808080 weight">缴费时间：{{item.payTime | dateFormat}}</text>
							</view>
						</view>
						<QS-P width="25rpx"></QS-P>
						<text class="QS-text large weight">-￥{{item.totalAmount}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="scroll-item-def" v-for="(item, index) in list" :key="index">
				<view class="flex_row_between_c">
					<text class="QS-text large">{{item.storeName}}</text>
					<text class="QS-text large weight">￥{{item.amount}}</text>
				</view>
				<QS-P height="28rpx"></QS-P>
				<view class="flex_row_between_c">
					<text class="QS-text mini">{{item.createDate | dateFormat}}</text>
					<text class="QS-text mini color_888888">{{item.plat_proxy}}</text>
				</view>
			</view> -->
		</block>
		<block v-else-if="tabItem.id == 'couponOrder'">
			<view class="padding-rpx_30_25">
				<view class="scroll-item" v-for="(item, index) in list" :key="index" @tap="navigateTo('my.couponDetail')">
					<view class="flex_row">
						<image :src="item.couponUrl || ''" mode="aspectFill" class="coupon-img"></image>
						<view class="flex_1 flex_row padding-rpx_10_25">
							<view class="flex_column_between_none flex_1">
								<text class="QS-text large weight">{{item.name}}</text>
								<text class="QS-text mini-xx">{{item.remark}}</text>
								<text class="QS-text mini-xxx color_888888">{{item.startDate}}-{{item.overDate}}</text>
							</view>
							<view class="flex_row_c_c">
								<text style="font-size: 22rpx;" v-if="item.status == 1">去使用</text>
								<text style="font-size: 22rpx;" v-if="item.status == 2">已过期</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 列表状态展示 -->
		<view class="list-status-box">
			<listStatus :statusText="statusText" @click="getList(false, true, false)"></listStatus>
		</view>
	</view>
</template>

<script>
	import {
		getOfflinePayment,
		getStopCarOrder,
		getCouponOrder
	} from '@/apis/order.js';
	import {
		doPageDemand
	} from '@/QS-UI-CONFIG/js/pageDemand.js';
	// import collectionListItem from '@/components/collection-list-item/collection-list-item.vue'; 
	export default {
		// components: { collectionListItem },
		props: {
			tabItem: {
				type: [Object, String],
				default () {
					return {}
				}
			},
			index: {
				type: [String, Number],
				default: ''
			},
			current: {
				type: [String, Number],
				default: ''
			},
			type: {
				type: String,
				default: ''
			},
			show: {
				type: Boolean,
				default: false
			},
			readyRefresh: {
				type: [Boolean, String],
				default: false
			},
			refreshDistance: {
				type: Number,
				default: 0
			},
			customData: { //由最外部传入的自定义数据
				type: [Object, String, Number, Array, Boolean],
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				list: [],
				sendData: {
					page: 1,
					firstType: 2,
					secondType: this.tabItem.type
				},
				statusText: {},
			}
		},
		created() {
			// console.log('component - created - tab:' + this.tab);
			// console.log('component - created - index:' + this.index);
		},
		methods: {
			cancel(item) {
				cancel({
						orderNo: item.orderNo
					})
					.then(res => {
						this.init(true);
					})
					.catch(err => {

					})
			},
			init(refresh) { //若是用户触发下拉刷新则refresh为true
				this.getList(refresh, false, false);
				// if (refresh) _this.$emit('refreshEnd', true);
			},
			getList(refresh, doEvent, force) {
				console.log('调用获取列表方法 ')
				let _this = this;
				doPageDemand.call(_this, {
					getDataFn: uni.$qs.myApis.common.getUserOrderList, //获取数据的方法
					successEnd() {
						if (refresh) _this.$emit('refreshEnd', true);
					},
					fail() {
						console.log('访问接口失败');
						if (refresh) _this.$emit('refreshEnd', false);
					}, //接口访问失败回调

					sendDataName: 'sendData', //携带数据字段名称
					pageNumName: 'page', //携带数据中的页数字段名称
					pageSizeName: 'pageSize', //携带数据中的条数字段名称

					checkLastPageMode: 'page', //判断是否是最后一页的逻辑标识, 用于逻辑判断, 目前默认有两个参数 size: 判断条数, page: 判断页数, 默认为size
					newDatafields: 'rows', //接口访问成功后获取列表数据字段名称, 可用. 链式获取
					dataLastPageName: 'pages', //接口访问成功后数据中的最大页数字段名称, 可用. 链式获取
					sizeName: 'total', //接口访问成功后数据中条数字段名称, 可用. 链式获取

					setName: 'list', //页面中列表数据字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
					statusTextName: 'statusText', //页面中列表状态字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
					lastPageName: false, //页面中最后一页字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
					waitingName: false, //页面中获取数据等待字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略

					refresh, //刷新标识, 若为true则会将携带数据中的页数重置为1
					force, //强制标识, 若为true则会忽略等待标识为true时的跳过操作
					doEvent, //进入状态判断标识, 若为true则会进入判断列表status而进行相应操作

					noDataText: false, //访问接口后若数据长度为0则可自定义为空时文字

					refreshClear: false, //刷新时是否清空数据
				})
			},
			updated() {
				this.$emit('toOldScrollTop');
			}
			/* itemClick(ind) {
				uni.showToast({
					title: `第${this.index}列 第${ind}项`
				})
			} */
		}
	}
</script>

<style scoped lang="scss">
	.scroll-item-def{
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 32rpx 25rpx;
		margin-bottom: 1px;
		overflow: hidden;
	}
	
	.scroll-item {
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.coupon-img {
		height: 186rpx;
		width: 186rpx;
		background-color: #9BE4FF;
	}
	
	.stop-list-container{
		padding: 0 25rpx;
		display: flex;
		flex-direction: column;
			.stop-list-item{
				padding: 30rpx 25rpx;
				display: flex;
				flex-direction: column;
				background-color: #ffffff;
				border-radius: 10rpx;
				.text-item{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}
				.text-item:not(:nth-child(1)) {
					margin-top: 6rpx;
				}
			}
			.stop-list-item:not(:nth-child(1)) {
				margin-top: 20rpx;
				// border-top: 1px solid #f2f2f2;
			}
	}
</style>
